<template>
    <ul class="wioc-list-oa">
		<li :key="'dd'+index" v-for="(item,index) in datalist" >
			<wioc-link-url :href="item.url" >
				<i v-if="item.num">{{item.num>999?'...':item.num}}</i>
				<wioc-icon-svg :name="item.icon"></wioc-icon-svg>
				<h3>{{item.name}}</h3> 
			</wioc-link-url>
		</li>
    </ul>
</template>


<script>
    export default {
        name:"wioc-list-oa",
        components:{

        },
        data(){
            return{

            }
        },
        props:{
            datalist:Array,
        },
		methods:{
			
		}
    }

</script>

<style lang="less" scoped>
.wioc-list-oa{
    display:flex;
    justify-content:flex-start;
    //justify-content: space-between;
    flex-wrap: wrap;
    align-items:center;
   
    li{
        width:31%;
		box-sizing: border-box;
		text-align: center;
        background-image: linear-gradient(0deg, #FFFFFF 0%, rgba(245,250,255,0.99) 100%);
		border-radius: 0.145rem;
		margin: 0 0.09rem 0.09rem 0;
		position:relative;
		padding: 0.15rem 0;
		i{
			position: absolute;
			top:-2%;
			right:-2%;
			display: block;
			line-height: 0.2rem;
			min-width: 0.2rem;
			min-height: 0.2rem;
			font-size: 0.11rem;
			text-align: center;
			color: #FFFFFF;
			background: #F66464;
			border-radius:50%;
			font-weight: bold;

		}
        img{
            display: block;
            width: 0.49rem;
            height: 0.49rem;
            border-radius: 0.15rem;
            vertical-align: middle;
            margin: 0 auto;
        }
        h3{
            width: 100%;
            font-size: 0.15rem;
            line-height: 0.22rem;
            margin-top: 0.1rem;
            font-weight: normal;
            color: #595959;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
			text-align: center;
        }
		&:nth-child(3n){
		     margin-right: 0;
		 }
    }
}


</style>
